<template>
	<view>
		<view class="map_container">
			<map class="map" id="map" :longitude="longitude" :latitude="latitude" scale="14" :show-location="true" :markers="markers"
			 bindmarkertap="makertap" @click="clickAddress"></map>
		</view>
		<view class="rgc_info">
			<view>经度：{{longitude}}</view>
			<view>纬度：{{latitude}}</view>
			<view>地址：{{address}}</view>
			<view>距离：{{distance}}M</view>
		</view>
	</view>
</template>

<script>
	import bmap from "../../components/map/bmap-wx.js"
	let wxMarkerData = [];
	let BMap = new bmap.BMapWX({
		ak: 'rRLpCn1VGWjk76ADihGBkET2xfZXgSH2'
	})
	export default {
		data() {
			return {
				markers: [],
				latitude: null,
				longitude: null,
				rgcData: {},
				address: {},
				warehousePoint: {
					lat: 104.06476,
					lng: 30.5702,
					address: '四川省成都市武侯区环球东路'
				},
				distance: 0
			}
		},
		onLoad() {
			this.getNowaddress();
		},
		methods: {
			getGeocod() {
				let _this = this;
				uni.showLoading({
					title: "获取信息中"
				});
				BMap.geocoding({
					address: "北京市海淀区上地十街10号",
					success: (res) => {
						uni.hideLoading()
						wxMarkerData = res.wxMarkerData;
						_this.markers = wxMarkerData
						_this.latitude = wxMarkerData[0].latitude
						_this.longitude = wxMarkerData[0].longitude
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			getNowaddress() {
				let _this = this;
				uni.showLoading({
					title: "获取信息中"
				});
				BMap.regeocoding({
					success: (res) => {
						uni.hideLoading()
						wxMarkerData = res.wxMarkerData;
						_this.markers = wxMarkerData
						_this.latitude = wxMarkerData[0].latitude
						_this.longitude = wxMarkerData[0].longitude
						_this.address = wxMarkerData[0].address
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			clickAddress(e) {
				let _this = this;
				let location = [e.detail.latitude, e.detail.longitude]
				BMap.regeocoding({
					location: location.toString(),
					success: (res) => {
						wxMarkerData = res.wxMarkerData;
						console.log(wxMarkerData);
						_this.markers = wxMarkerData;
						_this.latitude = wxMarkerData[0].latitude
						_this.longitude = wxMarkerData[0].longitude
						_this.address = wxMarkerData[0].address + " " + wxMarkerData[0].desc
						let point = {
							lat: wxMarkerData[0].latitude,
							lng: wxMarkerData[0].longitude
						}
						_this.distance = _this.getDoubleDistance(point, _this.warehousePoint);
					},
					fail: (err) => {
						console.log(res)
					}
				})
			},
			getDoubleDistance(point1, point2) {
				// point:{lat:...,lng:....}
				// let lat1 = 104.06476,lat2 = 104.20858,lng1 = 30.5702,lng2 = 30.6417;
				let lat1 = point1.lat,
					lat2 = point2.lat,
					lng1 = point1.lng,
					lng2 = point2.lng;
				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(
					b / 2), 2)))
			}
		}
	}
</script>

<style scoped>
	.map_container {
		height: 420px;
		width: 100%;
	}

	.map {
		height: 100%;
		width: 100%;
	}

	.rgc_info {
		padding: 5px;
	}

	.rgc_info {
		display: block;
	}
</style>
